<template>
  <div>
    <div style="height: 507px">
      <el-form
        :inline="true"
        ref="formRef"
        :disabled="isView"
        :model="saveParams"
        label-width="100px"
        :rules="rules"
      >
        <div style="display: flex; flex-wrap: wrap">
          <el-col :span="6">
            <el-form-item label="SKU编码">
              <el-input
                v-model="saveParams.skuCode"
                disabled
                placeholder="不填将自动生成"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="所属仓库" prop="warehouseId">
              <el-select
                :disabled="saveParams.skuId"
                clearable
                v-model="saveParams.warehouseId"
                @change="changeWarehouse"
              >
                <template v-for="(item, index) in warehouseList" :key="index">
                  <el-option
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品名称" prop="skuName">
              <el-input
                v-model="saveParams.skuName"
                placeholder="商品名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品分类" prop="classifyId">
              <el-cascader
                v-model="saveParams.classifyPaths"
                :options="skuClassifyList"
                :show-all-levels="false"
                :props="{
                  expandTrigger: 'hover',
                  value: 'classifyId',
                  label: 'title',
                }"
                @change="changeClassId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品属性" prop="attrName">
              <el-input
                v-model="saveParams.attrName"
                placeholder="商品属性"
                clearable
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="商品条码" prop="barcode">-->
          <!--              <el-input v-model="saveParams.barcode" @input="saveParams.barcode=limitCharAndNumber(saveParams.barcode)" placeholder="商品条码" clearable/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="6">
            <el-form-item label="商品品牌">
              <el-input
                v-model="saveParams.brand"
                placeholder="商品品牌"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位">
              <el-input
                v-model="saveParams.unitType"
                placeholder="单位"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量">
              <el-input
                v-model="saveParams.weight"
                placeholder="重量"
                @input="saveParams.weight = limitNumber(saveParams.weight)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体积">
              <el-input
                v-model="saveParams.volume"
                placeholder="体积"
                @input="saveParams.volume = limitNumber(saveParams.volume)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="长">
              <el-input
                v-model="saveParams.length"
                placeholder="长"
                @input="saveParams.length = limitNumber(saveParams.length)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宽">
              <el-input
                v-model="saveParams.width"
                placeholder="宽"
                @input="saveParams.width = limitNumber(saveParams.width)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="高">
              <el-input
                v-model="saveParams.height"
                placeholder="高"
                @input="saveParams.height = limitNumber(saveParams.height)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="售价">
              <el-input
                v-model="saveParams.price"
                placeholder="售价"
                @input="saveParams.price = limitNumber(saveParams.price)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="吊牌价">
              <el-input
                v-model="saveParams.tagPrice"
                placeholder="吊牌价"
                @input="saveParams.tagPrice = limitNumber(saveParams.tagPrice)"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="参考进价">
              <el-input
                v-model="saveParams.refPrice"
                placeholder="参考进价"
                @input="saveParams.refPrice = limitNumber(saveParams.refPrice)"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="成本价">
              <el-input
                v-model="saveParams.costPrice"
                placeholder="成本价"
                @input="
                  saveParams.costPrice = limitNumber(saveParams.costPrice)
                "
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" style="width: 95%">
              <el-input
                type="textarea"
                :rows="3"
                v-model="saveParams.remark"
                placeholder="备注"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品图片">
              <template v-if="isView">
                <template v-for="(img, index) in imgList" :key="index">
                  <ImagePreview
                    v-if="img"
                    :width="150"
                    :height="150"
                    :src="img"
                  ></ImagePreview>
                </template>
              </template>
              <template v-else>
                <ImageUpload
                  :limit="3"
                  :isShowTip="false"
                  :fileType="['png', 'jpg', 'pdf']"
                  :modelValue="imgList"
                  tailPath="sku"
                  :fileSize="10"
                  @update:modelValue="handleUpload($event)"
                ></ImageUpload>
              </template>
            </el-form-item>
          </el-col>
        </div>
      </el-form>
    </div>
    <div class="dFooter">
      <span class="dialog-footer">
        <el-button type="primary" v-if="!isView" @click="clickNext">
          下一步
        </el-button>
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import ImageUpload from "@/components/ImageUpload";
import { getSkuAttrFilter, getSkuClassifyFilter } from "@/api/scApi";
import { limitCharAndNumber } from "@/utils/shuangcheng";
import ImagePreview from "@/components/ImagePreview/index.vue";
import { getCompanySelect, getWarehouseSelect } from "@/api/system/user";

const { proxy } = getCurrentInstance();
let saveParams = ref({});
let imgList = ref([]);

const props = defineProps({
  detailData: { type: Object },
  isView: { type: Boolean },
});
onMounted(() => {
  getWarehouse().then(() => {
    if (JSON.stringify(props.detailData) != "{}") {
      saveParams.value = props.detailData.header;
      if (saveParams.value.classifyPath) {
        saveParams.value.classifyPaths =
          saveParams.value.classifyPath.split(",");
        saveParams.value.classifyPaths =
          saveParams.value.classifyPaths.map(Number); //转成int类型
      }
      imgList.value = saveParams.value.imgs;
    }
    if (saveParams.value.skuId) {
      getSkuClassifyList();
    }
  });
});
// 表单校验
const rules = ref({
  skuName: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
  classifyId: [
    { required: true, message: "商品分类不能为空", trigger: "change" },
  ],
  attrName: [
    { required: true, message: "商品属性不能为空", trigger: "change" },
  ],
  companyId: [
    { required: true, message: "所属公司不能为空", trigger: "change" },
  ],
  warehouseId: [
    { required: true, message: "所属仓库不能为空", trigger: "change" },
  ],
});

const emits = defineEmits(["cancel", "setBaseInfo"]);

function handleClose() {
  emits("cancel");
}
function clickNext() {
  if (imgList.value && imgList.value.length > 0) {
    if (typeof imgList.value === "object") {
      saveParams.value.imgs = imgList.value;
    } else {
      saveParams.value.imgs = imgList.value.split(",");
    }
  }
  proxy.$refs.formRef.validate((valid, fileds) => {
    if (valid) {
      emits("setBaseInfo", saveParams.value);
    }
  });
}

function handleUpload(val, index) {
  imgList.value = val;
  saveParams.value.imgs = val.split(",");
}

function getData() {
  return saveParams.value;
}

//获取商品分类下拉列表数据
let skuClassifyList = ref([]);
function getSkuClassifyList() {
  getSkuClassifyFilter({
    companyId: sysUserInfo.companyId,
    warehouseId: saveParams.value.warehouseId,
  }).then((res) => {
    if (res.code === 200) {
      skuClassifyList.value = res.data;
    }
  });
}

defineExpose({
  getData,
});

function changeClassId(val) {
  saveParams.value.classifyPath = val.join(",");
  saveParams.value.classifyId = val[val.length - 1];
}

//获取仓库下拉数据
let warehouseList = ref([]);
const sysUserInfo = JSON.parse(localStorage.getItem("userInfo"));
function getWarehouse() {
  return new Promise((resolve, reject) => {
    getWarehouseSelect({ companyId: sysUserInfo.companyId }).then((res) => {
      warehouseList.value = res.data;
      resolve();
    });
  });
}

//改变仓库
function changeWarehouse() {
  //改变仓库 清空关联值
  clearSelectVal();
  getSkuClassifyList();
}

//清空下拉值
function clearSelectVal() {
  saveParams.value.classifyId = "";
  skuClassifyList.value = [];
}
</script>

<style scoped lang="scss">
.dFooter {
  width: 100%;
  display: flex;
  justify-content: right;
}
</style>
